<template>
    <div class="bid-list-container">
        <h2>我的竞拍记录</h2>

        <el-table :data="bidList" border style="width: 100%" v-loading="loading">
            <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
            <el-table-column prop="auctionTitle" label="拍卖商品" min-width="180"></el-table-column>
            <el-table-column prop="price" label="竞拍价格" width="120">
                <template #default="scope">
                    <span class="price">￥{{ scope.row.price }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="竞拍时间" width="180"></el-table-column>
            <el-table-column prop="status" label="状态" width="120">
                <template #default="scope">
                    <el-tag :type="getBidStatusType(scope.row.status)">
                        {{ getBidStatusText(scope.row.status) }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150" align="center">
                <template #default="scope">
                    <el-button type="primary" link @click="viewAuction(scope.row.auctionId)">查看拍品</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-container" v-if="total > 0">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total"></el-pagination>
        </div>

        <el-empty v-if="bidList.length === 0 && !loading" description="暂无竞拍记录"></el-empty>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getCurrentUserBids, getUserHighestBid } from '@/api/bid'

const router = useRouter()
const loading = ref(false)
const bidList = ref([])
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 获取用户竞价记录列表
const fetchBidList = async () => {
    loading.value = true
    try {
        const res = await getCurrentUserBids(page.value, pageSize.value)
        if (res.code === 1) {
            // 处理竞价记录数据，添加状态信息
            const bids = res.data.list || []
            const processedBids = []

            for (const bid of bids) {
                // 获取每个拍卖品的最高出价，判断当前用户的出价是否为最高
                const highestBidRes = await getUserHighestBid(bid.auctionId)
                let status = bid.status; // 直接使用后端返回的状态

                processedBids.push({
                    id: bid.id,
                    auctionId: bid.auctionId,
                    auctionTitle: bid.title, // 使用后端返回的拍卖品标题
                    price: bid.bidPrice,
                    createTime: bid.createTime || bid.bidTime,
                    status: status
                })
            }

            bidList.value = processedBids
            total.value = res.data.total || 0
        } else {
            ElMessage.error(res.msg || '获取竞价记录失败')
        }
    } catch (error) {
        console.error('获取竞价记录失败', error)
        ElMessage.error('获取竞价记录失败，请稍后再试')
    } finally {
        loading.value = false
    }
}

// 查看拍品详情
const viewAuction = (auctionId) => {
    router.push(`/user/auction/${auctionId}`)
}

// 获取竞价状态对应的Tag类型
const getBidStatusType = (status) => {
    const statusMap = {
        '0': 'success', // 领先
        '1': 'warning', // 被超越
        '2': 'primary', // 已中标
        '3': 'info'     // 未中标
    }
    return statusMap[status] || 'info'
}

// 获取竞价状态文本
const getBidStatusText = (status) => {
    const statusMap = {
        '0': '领先',
        '1': '已被超越',
        '2': '已中标',
        '3': '未中标'
    }
    return statusMap[status] || '未知'
}

// 分页处理
const handleSizeChange = (val) => {
    pageSize.value = val
    fetchBidList()
}

const handleCurrentChange = (val) => {
    page.value = val
    fetchBidList()
}

onMounted(() => {
    fetchBidList()
})
</script>

<style scoped>
.bid-list-container {
    padding: 20px;
}

.price {
    color: #f56c6c;
    font-weight: bold;
}

.pagination-container {
    margin-top: 20px;
    text-align: right;
}
</style>